<template>
    <div class="wrap-table">
        <el-form ref="form" :model="searchData" label-width="100px" class="clearfix flex-div">
            <el-form-item label="操作时间" class="" label-width="70px">
                <div class="block" style="width: 300px">
                    <el-date-picker
                            v-model="timeDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-form-item>
	        <el-form-item label="数值类型" class="" style="width: 220px" label-width="100px">
		        <el-select v-model="searchData.period" clearable placeholder="请选择">
			        <el-option label="全部" value=""></el-option>
			        <el-option label="孕前&孕期干预强度" value="1"></el-option>
			        <el-option label="儿童期干预强度" value="2"></el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item label="原值" class="" style="width: 200px" label-width="70px">
		        <el-select v-model="searchData.oldIntensityOfIntervention" clearable placeholder="请选择">
			        <el-option label="全部" value=""></el-option>
			        <el-option label="-" value="-"></el-option>
			        <el-option label="A" value="2"></el-option>
			        <el-option label="AA" value="1"></el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item label="新值" class="" label-width="70px" style="width: 200px">
		        <el-select v-model="searchData.newIntensityOfIntervention" clearable placeholder="请选择">
			        <el-option label="全部" value=""></el-option>
			        <el-option label="A" value="2"></el-option>
			        <el-option label="AA" value="1"></el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item class="" label="">
		        <el-input v-model="searchData.key" style="width: 350px;margin-left: -60px;"
		                  placeholder="研究编号、姓名首字母、操作人账号、操作人姓名"></el-input>
	        </el-form-item>
	        <div class="flex-r-but">
		        <el-button type="primary" @click="checkList" class=" mg-lr-20 pd-bt">查询</el-button>
	        </div>
        </el-form>
        <!---->
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    element-loading-text="加载中"
                    style="width: 100%">
	            <el-table-column
			            prop="Surname"
			            label="姓名首字母"
			            align="center"
			            min-width="100">
	            </el-table-column>
	            <el-table-column
			            prop="ResearchNo"
			            label="研究编号"
			            align="center"
			            min-width="100">
	            </el-table-column>
                <el-table-column
                        prop="UserCode"
                        label="操作人账号"
                        align="center"
                        min-width="110">
                </el-table-column>
	            <el-table-column
			            prop="OpName"
			            label="操作人姓名"
			            align="center"
			            min-width="110">
	            </el-table-column>
	            <el-table-column
			            prop="OpTime"
			            label="操作时间"
			            :show-overflow-tooltip="true"
			            align="center"
			            min-width="160">
	            </el-table-column>
                <el-table-column
                        prop="Period"
                        label="数值类型"
                        :formatter="PeriodFilter"
                        align="center"
                        min-width="150">
                </el-table-column>
	            <el-table-column
			            prop="OldIntensityOfIntervention"
			            label="原值"
			            align="center"
			            :formatter="IntensityFilter"
			            min-width="60">
	            </el-table-column>
	            <el-table-column
			            prop="NewIntensityOfIntervention"
			            label="新值"
			            align="center"
			            :formatter="IntensityFilter"
			            min-width="60">
	            </el-table-column>
	            <el-table-column
			            min-width="60"
			            fixed="right"
			            align="center"
			            label="操作">
		            <template  slot-scope="scope">
			            <el-button  size="small" type="text"  @click="handleTable(scope.row)">查看</el-button>
		            </template>
	            </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <div class="block mg-20-auto pagination-fixed">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageId"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
	    <el-dialog
			    title="健康现况变更明细"
			    :visible.sync="dialogVisible"
			    width="50%"
			    >
		    <div style="display: flex">
			    <div style="flex: 1;text-align: center;border-right: 1px solid #DCDFE6;padding: 20px;">
					<h3>变更前</h3>
				    <p style="margin-top: 20px" v-html="oldValue || '无'"></p>
			    </div>
			    <div style="flex: 1;text-align: center;padding: 20px;">
				    <h3>变更后</h3>
				    <p style="margin-top: 20px" v-html="newValue"></p>
			    </div>
		    </div>
	    </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                searchData:{
                	key:'',
	                newIntensityOfIntervention:'',
	                oldIntensityOfIntervention:'',
	                period:''
                },
	            oldValue:'',
	            newValue:'',
	            dialogVisible:false,
	            IntensityFilter(row, column, cellValue, index) {
		            return cellValue == '2'?'A':cellValue == '1'?'AA':'-'
	            },
	            PeriodFilter(row, column, cellValue, index){
		            return cellValue == '1'?'孕前&孕期干预强度':cellValue == '2'?'儿童期干预强度':'全部'
	            },
                timeDate:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                    },{
                        text: '最近一个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                       }
                    },{
                        text: '最近三个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                      }
                    }],
               },
                pageId:1,
                total:null,
                loading:true,
                pageSize:10,
                tableData:[],
                maxHeight:'',
            }
        },
        mounted:function(){
            let that=this;
	        let now = new Date();
	        let nowTime = now.getTime() ;
	        let day = now.getDay();
	        if(day==0){     //西方从周日算为第一天    2018/10/28
		        day=7
	        }
	        let oneDayLong = 24*60*60*1000 ;
	        let MondayTime = nowTime - (day+29)*oneDayLong  ;
	        let SundayTime =  nowTime ;
	        let monday = dateForm(new Date(MondayTime));
	        let sunday = dateForm(new Date(SundayTime));
	        that.timeDate= [
		        monday,
		        sunday
	        ];   //初始化时间范围
            that.getList()
        },
        beforeMount:function() {
            let that=this;
            let appHeight=$(window).height();
            let autoheight=(appHeight-300)+'px'
            that.maxHeight=autoheight
        },
        methods: {
	        handleTable(row){
	        	this.dialogVisible = true;
	        	this.newValue = row.NewValue
		        this.oldValue = row.OldValue
				console.log(row)
	        },
            checkList:function(){   //查询
                this.pageId=1;
                this.pageSize=10;
                this.total=null;
                this.getList()
            },
            handleSizeChange(val) {       //条数改变
                this.pageSize=val;
                this.getList()
            },
            handleCurrentChange(val) {    //页数改变
                this.pageId = val
                this.getList()
            },
            getList:function(){           //获取一级信息列表
                let that=this
                that.loading=true
                that.service({
                    url:'/Log/GetHealthConditionTwoOpLog',
                    method:'get',
                    params:{
                        pageCount:(that.pageId-1),
                        pageSize:that.pageSize,
                        startDate:that.timeDate?that.timeDate[0]:'',
                        endDate:that.timeDate?that.timeDate[1]:'',
	                    ...that.searchData
                }
                }).then(response=>{
                    that.tableData=response.dtData;
                    that.total =parseInt(response.dtData[0].TotalCount);
                    that.loading=false
                }).catch(data=>{
                    that.loading=false
                })
            }
        }
    }
    function addZero(s){
        return s < 10 ? '0' + s: s;
    }
    function dateForm(data){
        return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
    }
</script>
<style scoped lang="scss">
    .click_line{cursor: pointer;color:#409EFF;}
    .pagination-fixed{
        position: static;
    }
</style>
